import CUserNickName from '@/components/user/CUserNickName'
import CUserPersonalStatement from '@/components/user/CUserPersonalStatement'
import useEffectDeptPage from '@/useEffect/useEffectDeptPage'
import useEffectJobPage from '@/useEffect/useEffectJobPage'
import useEffectRolePage from '@/useEffect/useEffectRolePage'
import Validator from '@/util/Validator'
import { Col, Form, useFormState } from '@douyinfe/semi-ui'
import { OptionProps } from '@douyinfe/semi-ui/lib/es/select'
import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree'

// 获取 下拉选的数据
export function getUserFormSelectData(modalVisible: boolean) {
  const { roleList } = useEffectRolePage(modalVisible)
  const { deptList } = useEffectDeptPage(modalVisible)
  const { jobList } = useEffectJobPage(modalVisible)

  return { roleList, deptList, jobList }
}

interface IUserFormItem {
  confirmLoading: boolean
  roleList: OptionProps[]
  deptList: TreeNodeData[]
  jobList: TreeNodeData[]
}

export default function UserFormItem(props: IUserFormItem) {
  const formState = useFormState()

  return (
    <>
      <Col span={12}>
        <CUserNickName noIcon disabled={props.confirmLoading}></CUserNickName>
      </Col>
      <Col span={12}>
        <Form.Input
          field="email"
          showClear
          validate={Validator['emailCanNullValidate']}
          label={{ text: '邮箱' }}
        />
      </Col>
      <Col span={12}>
        <Form.Input
          field="phone"
          showClear
          validate={Validator['phoneCanNullValidate']}
          label={{ text: '手机号' }}
        />
      </Col>
      {!formState.values.id && (
        <Col span={12}>
          <Form.Input
            field="password"
            showClear
            validate={Validator['passwordCanNullValidate']}
            label={{ text: '密码' }}
          />
        </Col>
      )}
      <Col span={12}>
        <Form.Select
          multiple
          field="roleIdSet"
          showClear
          label="绑定角色"
          filter
          className="w100"
          optionList={props.roleList}
          maxTagCount={10}
        ></Form.Select>
      </Col>
      <Col span={12}>
        <Form.TreeSelect
          field="deptIdSet"
          showClear
          label="绑定部门"
          filterTreeNode
          showFilteredOnly
          treeData={props.deptList}
          className="w100"
          multiple
          maxTagCount={10}
          checkRelation="unRelated"
          virtualize={{
            height: 300,
            itemSize: 28,
          }}
        ></Form.TreeSelect>
      </Col>
      <Col span={12}>
        <Form.TreeSelect
          field="jobIdSet"
          showClear
          label="绑定岗位"
          filterTreeNode
          showFilteredOnly
          treeData={props.jobList}
          className="w100"
          multiple
          maxTagCount={10}
          checkRelation="unRelated"
          virtualize={{
            height: 300,
            itemSize: 28,
          }}
        ></Form.TreeSelect>
      </Col>
      <Col span={12}>
        <CUserPersonalStatement></CUserPersonalStatement>
      </Col>
      <Col span={12}>
        <Form.Switch
          field="enableFlag"
          label={{
            text: '正常/冻结',
          }}
        />
      </Col>
    </>
  )
}
